$backgroundColor: #fdfdfd;

@import '~angular-gridster/dist/angular-gridster.css';
@import '~angular-loading-bar/build/loading-bar.css';
@import '~angular-material/modules/scss/angular-material';
@import '~angular-material-data-table/dist/md-data-table.css';
@import '~angular-moment-picker/dist/angular-moment-picker.css';
@import '~angular-timeline/dist/angular-timeline.css';
@import '~bootstrap/dist/css/bootstrap.css';
@import '~codemirror/addon/dialog/dialog.css';
@import '~codemirror/addon/lint/lint.css';
@import '~codemirror/lib/codemirror.css';
@import '~dragular/dist/dragular.css';
@import '~highlight.js/styles/a11y-light.css';
@import '~md-color-picker/dist/mdColorPicker.css';
@import '~md-steppers/dist/md-steppers.min.css';
@import '~@toast-ui/editor/dist/toastui-editor.css';
@import '~@toast-ui/editor/dist/toastui-editor-viewer.css';

@import '~v-accordion/dist/v-accordion.css';

@import 'constants';

@import 'components/circularPercentage/circularPercentage';
@import 'components/contextual/contextual-doc.component';
@import 'components/dashboard/dashboard';
@import 'components/documentation/page/page';
@import 'components/identityPicture/identityPicture';
@import 'components/image/image';
@import 'components/import/import-api';
@import 'components/navbar/navbar';
@import 'components/notifications/notifications';
@import 'components/sidenav/sidenav';
@import 'components/widget/widget';

@import 'management/analytics';
@import 'management/api/api';
@import 'management/application/applications';
@import 'management/configuration/theme/theme';
@import 'management/configuration/user/user';
@import 'management/configuration/users/users';
@import 'management/configuration/categories/category/category';
@import 'management/datatable';
@import 'management/forms';
@import 'management/instances/instances';
@import 'management/platform/dashboard/dashboard';
@import 'management/portalnotifications/portalnotifications';
@import 'management/stepper';
@import 'management/submenu';
@import 'management/tasks/tasks';

@import 'user/user';
@import 'user/login/login';

html {
  font-family: 'Roboto Slab', serif;
}

body {
  top: 0px !important;
  background-color: lightgrey;
  position: inherit !important;
}

[layout=row] {
  flex-direction: row;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.thumbnail {
  height: 200px;

  img.pull-right {
    width: 50px;
  }
}

.user-avatar {
  border-radius: 99%;
}

.md-toolbar-tools-bottom {
  font-size: small;
}

.gravitee-table {
  width: 100%;

  th {
    text-align: center;
  }
}

.gravitee-logo {
  height: 200px;
  padding-right: 10px;
  vertical-align: middle;
}

.gravitee-navbar-logo {
  height: 50px;
  padding-right: 10px;
  vertical-align: middle;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.icon-users {
  width: 1.125em;
}

.flex {
  flex: 1;
}

.face {
  margin: 0px 16px;
}

md-toolbar {
  font-size: 18px;
  min-height: 49px;
  .md-tall {
    min-height: 100px;
  }
  z-index: 10;
}

a, [ui-sref] {
  cursor: pointer;
}

.gravitee-no-link {
  cursor: inherit !important;
}

md-switch {
  display: inline-flex;
}

.color3 {
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}

md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}

ng-md-icon {
  position: relative;
  top: 7px;

  &[icon=delete] {
    svg {
      width: 100%;
    }
  }
}

table {
  ng-md-icon {
    position: relative;
    top: 0;
  }
  code {
    position: relative;
    top: -6px;
  }
}

.btn-group ng-md-icon {
  position: relative;
  top: 3px;
}

md-radio-button ng-md-icon {
  position: relative;
  top: 2px;
}

.gravitee-card:hover {
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.37);
}

header {
  display: flex;
}

body {
  background: #fff;
}

table[md-data-table] {
  background-color: $backgroundColor;
}

table {
  background: #fff;
  border: solid 1px #ddd;
  margin-bottom: 1.25rem;
  table-layout: auto;
}

table thead {
  background: #F5F5F5;
}

table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
  display: table-cell;
  line-height: 1.125rem;
}

table thead tr th, table thead tr td {
  color: #222;
  font-weight: bold;
  padding: 0.5rem 0.625rem 0.625rem;
}

table tr th, table tr td {
  color: #222;
  padding: 0.5625rem 0.625rem;
  text-align: left;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
  background: #F9F9F9;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

md-toast {
  position: fixed;
  &.md-toast-success-theme .md-toast-content {
    background-color: #4ea44d;
  }
  &.md-toast-error-theme .md-toast-content {
    background-color: #bd362f;
  }
}

gravitee-sidenav {
  z-index: 20;
}

.gravitee-pie-chart-container {
  height: 150px;
  margin: 0 auto;
  text-align: center;
  width: 150px;
}

.form-control {
  padding-right: 30px;
}

.form-control-feedback, .has-feedback label ~ .form-control-feedback {
  position: relative;
  float: right;
  top: -35px;
}

.gravitee-placeholder {
  opacity: 0.4;
}

.md-container {
  display: inline-block;
}

.gravitee-no-sidenav-container {
  background: $backgroundColor;
  height: 100%;
}

.gravitee-no-sidenav-content {
  background-color: #fafafa;
  border-radius: 7px;
  width: 400px;
  margin: 40px auto 10px;
  overflow: hidden;
  padding: 10px 30px 30px;
  position: relative;

  & md-input-container {
    margin-top: 0px;
  }
}

.gravitee-no-sidenav-header {
  background-image: url('assets/GRAVITEE_LOGOV2_RECT.png');
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: center top;
  margin-bottom: 40px;
  padding-top: 100px;

  & a {
    margin: 10px auto;

    & img {
      height: 100px;
    }
  }

  & label {
    font-size: 28px;
    font-weight: 400;
    margin: 0px;
  }

  & label.subtitle {
    font-size: 14px;
    font-weight: 200;
  }
}

md-sidenav, md-backdrop {
  position: fixed;
}

md-list-item::before {
  min-height: 40px;
}

.md-whiteframe-1dp, .md-whiteframe-z1 {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.md-whiteframe-z2 {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.landing-header {
  padding: 0px 16px 0px 16px;

  h3 {
    color: #006CAB;
    font-size: 32px;

    small {
      font-size: 40%;
    }
  }

  p {
    color: #707070;
    font-size: 16px;
    margin: 0 0 20px;
  }
}

.api-box-icon {
  height: 50px;
  &.api-box-icon-figure {
    width: 150px;
  }
  img {
    display: block;
    max-width: 150px;
    max-height: 80px;
    width: auto;
    height: auto;
  }
  &.default {
    background-size: auto 100%;
  }
}

.api-box {
  width: 98%;
  min-width: 320px;
  max-width: 480px;
  margin: 14px;
  outline: none;
}

.apis-box {
  a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: black;
  }

  .api-box {
    md-card-header {
      padding: 0px 0px 20px 0px;
    }
    md-card-avatar {
      width: 35px;
      height: 20px;
    }
    md-card-content {
      padding: 0px;
    }
    md-card-footer {
      padding: 0px 5px 5px 5px;
    }
    .api-box-description {
      text-align: center;
    }
    .api-box-name-version {
      font-size: 14px;
      font-weight: 700;
      color: grey;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      small {
        padding: 0px;
      }
    }
    .api-box-state {
      font-size: 12px;
    }
    .api-box-footer {
      color: #cdcdcd;
    }
  }
}

.icon-circle {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border: 2px solid #45aed6;
  border-radius: 100px;
  position: relative;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

md-content, .main-content {
  background: #FFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 12px;
}

table[md-data-table] > thead:not([md-table-progress]) > tr > th > div {
  height: 30px;
}

table.md-table {
  overflow: auto;
}

v-pane-header {
  legend {
    border-bottom: none;
    margin-bottom: 0;
  }

  ng-md-icon {
    top: 4px;
  }
}

md-card.no-box-shadow {
  box-shadow: none;
}

.gravitee-detail-header {
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  height: $graviteeHeader;
}

.md-content {
  padding-top: $sidenavHeaderHeight;
}

.gv-main-container {
  height: calc(100vh - #{$sidenavHeaderHeight});
}

.gv-button-toggled {
  background-color: rgba(158, 158, 158, 0.2);
}

.md-select-menu-container {
  z-index: 99999 !important;
}

.disabled {
  pointer-events: none;
  opacity: 0.7;
}

[role=button] {
  cursor: pointer;
}

.readonly > [role=button] {
  cursor: inherit;
}

.md-dialog-container {
  height: 100vh !important;
  top: 0 !important;
  position: fixed !important;
}

@font-face {
  font-family: 'gravitee';
  src: url('./assets/font/gravitee.eot');
  src: url('./assets/font/gravitee.eot#iefix') format('embedded-opentype'),
       url('./assets/font/gravitee.woff') format('woff'),
       url('./assets/font/gravitee.ttf') format('truetype'),
       url('./assets/font/gravitee.svg#gravitee') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "gravitee";
  font-style: normal;
  font-weight: normal;

  text-decoration: inherit;
  width: 1em;
  margin-right: .1em;
  text-align: center;

  font-variant: normal;
  text-transform: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus {
  outline: none;
}

.icon-star-empty:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */
.icon-play:before { content: '\e802'; } /* '' */
.icon-play-circled2:before { content: '\e803'; } /* '' */
.icon-stop:before { content: '\e804'; } /* '' */
.icon-pause:before { content: '\e805'; } /* '' */
.icon-to-end:before { content: '\e806'; } /* '' */
.icon-to-end-alt:before { content: '\e807'; } /* '' */
.icon-to-start:before { content: '\e808'; } /* '' */
.icon-to-start-alt:before { content: '\e809'; } /* '' */
.icon-fast-fw:before { content: '\e80a'; } /* '' */
.icon-fast-bw:before { content: '\e80b'; } /* '' */
.icon-ok:before { content: '\e80c'; } /* '' */
.icon-ok-circled:before { content: '\e80d'; } /* '' */
.icon-ok-circled2:before { content: '\e80e'; } /* '' */
.icon-cancel:before { content: '\e80f'; } /* '' */
.icon-cancel-circled:before { content: '\e810'; } /* '' */
.icon-cancel-circled2:before { content: '\e811'; } /* '' */
.icon-help-circled:before { content: '\e812'; } /* '' */
.icon-info-circled:before { content: '\e813'; } /* '' */
.icon-arrows-cw:before { content: '\e814'; } /* '' */
.icon-cw:before { content: '\e815'; } /* '' */
.icon-ccw:before { content: '\e816'; } /* '' */
.icon-cloud:before { content: '\e817'; } /* '' */
.icon-flash:before { content: '\e818'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-angle-up:before { content: '\f106'; } /* '' */
.icon-angle-down:before { content: '\f107'; } /* '' */
.icon-play-circled:before { content: '\f144'; } /* '' */
.icon-ok-squared:before { content: '\f14a'; } /* '' */
.icon-sun:before { content: '\f185'; } /* '' */
.icon-moon:before { content: '\f186'; } /* '' */
.icon-pause-circle:before { content: '\f28b'; } /* '' */
.icon-pause-circle-o:before { content: '\f28c'; } /* '' */
.icon-stop-circle:before { content: '\f28d'; } /* '' */
.icon-stop-circle-o:before { content: '\f28e'; } /* '' */

table {
  code {
    top: inherit;
  }
}

.gv-search-button {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  fill: rgba(0, 0, 0, 0.54);
}

md-progress-circular {
  display: inline-block;
  position: absolute;
  top: 200px;
}

.ipsum{
  font-size: 11px;
  line-height: 14px;
  color: grey;
}

.md-fab-scrollable {
  position: fixed !important;
  transition: right .40s !important;
  -moz-transition: right .40s !important;
  -webkit-transition: right .40s !important;
  -o-transition: right .40s !important;

  &.gv-help-displayed {
    right: 320px !important;
  }
}

.gv-warning {
  fill: #ce4844;
}

.gv-input-number {
  width: fit-content;
  min-width: 300px;
}

.gv-tooltip {
  display: grid;
}

.gv-tooltip-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gv-tooltip-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gv-tooltip-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gv-tooltip-5 {
  grid-template-columns: repeat(5, 1fr);
}
